<template>
  <apps-layout>

    <template v-slot:page>
      <tool-card-panel v-show="isShow" class="text-center"></tool-card-panel>
      <router-view></router-view>
    </template>

    <template v-slot:topics>
      <topics-components v-show="isShow" class="text-center"></topics-components>
    </template>

    <template v-slot:left-drawer>
      <!-- drawer content -->
      <q-input ref="tagFilter" dense filled v-model="tagFilter" label="搜索标签">
        <template v-slot:append>
          <q-icon v-if="tagFilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter"/>
        </template>
      </q-input>

      <q-tree
          :nodes="tags"
          node-key="_id"
          label-key="name"
          :filter="tagFilter"
          default-expand-all
          selected-color="secondary"
          v-model:selected="selectedTag"
      />
    </template>

  </apps-layout>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { cloneDeep, isString } from 'lodash'
import { Tag, ToolList, UserInfo } from 'src/store/tool/state'
import iTool from 'src/api/tool'
import AppsLayout from 'layouts/AppsLayout.vue'
import ToolCardPanel from './tool/TheToolCardPanel.vue'
import TopicsComponents from './tool/TopicsComponents.vue'

export default defineComponent({
  name: 'Tool',
  components: {
    AppsLayout,
    ToolCardPanel,
    TopicsComponents
  },
  async preFetch ({
    store,
    currentRoute,
    previousRoute
  }) {
    if (previousRoute && previousRoute.name === 'AppDetail') return
    if (previousRoute && currentRoute && previousRoute.name === 'ToolIndex' && currentRoute.name === 'AppDetail') {
      return
    }
    const indexId = currentRoute.params.index
    await store.dispatch('tool/initTag')
    // 用户收藏点赞应用不走 SSR
    if (indexId === 'my-like' || indexId === 'my-collection') return
    // 搜索走 SSR
    if (indexId === 'search') {
      await store.dispatch('tool/initTool', {
        keywords: currentRoute.query.keywords,
        sorts: currentRoute.query.sorts
      })
      return
    }
    // 专题走 SSR
    if (indexId === 'topic') {
      const ids = currentRoute.query.ids
      await store.dispatch('tool/initTool', {
        ids: isString(ids) ? ids.split(',') : null
      })
      return
    }
    await store.dispatch('tool/initTool', { ids: [indexId] })
  },
  data () {
    return {
      isShow: false,
      left: true,
      darkMode: false,
      keepLogin: false,
      topics: [],
      topicName: '',
      tagFilter: '',
      selectedTag: ''
    }
  },
  computed: {
    tags (): Tag[] {
      return cloneDeep(this.$store.state.tool.tag.list)
    },
    toolList (): ToolList {
      return this.$store.state.tool.tool.list
    },
    userInfo (): UserInfo {
      return this.$store.state.userInfo
    }
  },
  watch: {
    selectedTag () {
      this.$router.push({
        name: 'AppIndex',
        params: { index: this.selectedTag }
      })
    }
  },
  async mounted () {
    this.isShow = true
    this.topics = await iTool.findAllTopic()
  },
  methods: {
    async clickTopic (topic: { name: string, tags: { _id: string }[] }) {
      await this.$router.push({
        name: 'ToolIndex',
        params: {
          index: 'topic'
        },
        query: {
          name: topic.name,
          ids: topic.tags.map((e) => e._id).join(',')
        }
      })
    },
    resetFilter () {
      this.tagFilter = ''
    }
  }
})
</script>

<style lang="scss" scoped>
@import '../css/quasar.variables.scss';

.search-bar {
  height: 80px;

  .search-bar-input {
    width: 500px;
  }

  &:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: top left -210px;
    opacity: 0.85;
  }
}

@media (max-width: $breakpoint-xs) {
  .search-bar {
    height: 80px;

    .search-bar-input {
      width: 320px;
    }
  }
}
</style>
